<template>
  <view class="wrapper">
    <!-- 个人资料 -->
    <view class="profile">
      <view class="meta">
        <!-- <image class="avatar" src="http://static.botue.com/ugo/uploads/monkey.png" /> -->
        <!-- <text class="nickname">孙悟空</text> -->
        <!-- <open-data class="avatar" type="userAvatarUrl"></open-data>
        <open-data class="nickname" type="userNickName"></open-data>-->
        <open-data class="avatar" type="userAvatarUrl"></open-data>
        <open-data class="nickname" type="userNickName"></open-data>
      </view>
    </view>
    <!-- 统计 -->
    <view class="count">
      <view class="cell">
        8
        <text>收藏的店铺</text>
      </view>
      <view class="cell">
        14
        <text>收藏的商品</text>
      </view>
      <view class="cell">
        18
        <text>关注的商品</text>
      </view>
      <view class="cell">
        84
        <text>我的足迹</text>
      </view>
    </view>
    <!-- 我的订单 -->
    <view class="orders">
      <view class="title">我的订单</view>
      <view class="sorts">
        <text class="icon-bill">待付款</text>
        <text class="icon-car">待收货</text>
        <text class="icon-money">退款/退货</text>
        <text class="icon-list">全部订单</text>
      </view>
    </view>
    <!-- 地址管理 -->
    <view class="address icon-arrow">收货地址</view>
    <!-- 其它 -->
    <view class="extra">
      <view @click="callPhone" class="item icon-arrow">联系客服</view>
      <button open-type="feedback" class="item icon-arrow">意见反馈</button>
      <!-- 分享小程序 -->
      <button open-type="share" class="item icon-arrow">分享小程序</button>
    </view>
  </view>
</template>

<script>
export default {
  onLoad() {
    // 调用API=》js方式分享 => 开启原生菜单（右上角的胶囊）的分享功能
    // uni.showShareMenu()
  },
  onShareAppMessage(res) {
    console.log(res);
    // 自定义转发小程序的内容
    return {
      title: "我的转发",
      imageUrl:
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=473008570,3269591064&fm=26&gp=0.jpg",
      path: "/pages/index/index?id=123"
    };
  },
  methods: {
    callPhone() {
      // 使用小程序提供的API打电话
      uni.makePhoneCall({
        phoneNumber: "10086"
      });
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;

  width: 100%;
  background-color: #f4f4f4;
}

.profile {
  height: 375rpx;
  background-color: #ea4451;
  display: flex;
  justify-content: center;
  align-items: center;

  .meta {
    .avatar {
      display: block;
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      border: 2rpx solid #fff;
      overflow: hidden;
    }

    .nickname {
      display: block;
      text-align: center;
      margin-top: 20rpx;
      font-size: 30rpx;
      color: #fff;
    }
  }
}

.count {
  display: flex;
  margin: 0 20rpx;
  height: 100rpx;
  text-align: center;
  border-radius: 4rpx;
  background-color: #fff;

  position: relative;
  top: -27rpx;

  .cell {
    flex: 1;
    padding-top: 16rpx;
    font-size: 27rpx;
    color: #333;
  }

  text {
    display: block;
    font-size: 24rpx;
  }
}

.orders {
  margin: -17rpx 20rpx 0 20rpx;
  padding: 20rpx 0;
  background-color: #fff;
  border-radius: 4rpx;

  .title {
    padding-left: 20rpx;
    font-size: 30rpx;
    color: #333;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;
  }

  .sorts {
    padding-top: 30rpx;
    text-align: center;
    display: flex;
  }

  [class*="icon-"] {
    flex: 1;
    font-size: 24rpx;

    &::before {
      display: block;
      font-size: 48rpx;
      margin-bottom: 8rpx;
      color: #ea4451;
    }
  }
}

.address {
  line-height: 1;
  background-color: #fff;
  font-size: 30rpx;
  padding: 25rpx 0 25rpx 20rpx;
  margin: 10rpx 20rpx;
  color: #333;
  border-radius: 4rpx;
}

.extra {
  margin: 0 20rpx;
  background-color: #fff;
  border-radius: 4rpx;

  .item {
    line-height: 1;
    padding: 25rpx 0 25rpx 20rpx;
    border-bottom: 1rpx solid #eee;
    font-size: 30rpx;
    color: #333;
  }

  button {
    text-align: left;
    background-color: #fff;

    &::after {
      border: none;
      border-radius: 0;
    }
  }
}

.icon-arrow {
  position: relative;

  &::before {
    position: absolute;
    top: 50%;
    right: 20rpx;
    transform: translateY(-50%);
  }
}
</style>
